<template>
	<div class="header">
		<div class="phone">

			<div class="bg_tab" v-if="show_tab"></div>
			<div class="phone_header">
				<span class="icon_tab" @click="p_Method"></span>
				<transition name="fade" v-if="show_tab">
					<ul>
						<li v-for="(v,i) in urlList" :key="i" @click="detail(v.link)">{{v.tit}}</li>
					</ul>
				</transition>
			</div>			
		</div>





		<div class="header_main flex f">
			<router-link to="/" class="flex_row_cen">
				<div class="flex_row_cen">
					<img :src="logo" alt="" class="logo">
					<span class="logo_name">杭州农村综合产权交易所</span>
				</div>
			</router-link>
			<div class="flex">
			<div class="fhsy flex_row_cen" @click="goFirstPage">返回首页</div>
			<div class="flex_row_cen tit_name">
				<!-- class="tit_active" -->
				<!-- {{this.activIndex}} -->
				<div v-for="item in urlList" :key="item.index" @click="toLink(item)" :class="item.index==active?'tit_active':''">
					<div>{{item.tit}}</div>
				</div>
			</div>
			<div class="flex_row_cen">
				 <el-input
					placeholder="请输入项目名称"
					class="el-input"
					prefix-icon="el-icon-search"
					v-model="searchData"
					@keyup.enter.native="searchMethod">
				</el-input>
			</div>
			</div>
		</div>
	</div>
</template>

<script>
	import logo from '~/components/static/img/logo.png'
	export default {
		props:{
			activIndex:	0,
			searchVal: ''
		},	
		mounted() {
			this.active = 	this.activIndex	
		},
		data(){
			return{
				show_tab:false,
				show:false,	
				searchData: '',
				logo:logo,
				active:1,
				urlList:[
					{
						tit:'首页',
						link:'/',
						index:1
					},
					{
						tit:'项目公告',
						link:'projectAnnouncement',
						index:2
					},
					{
						tit:'政策法规',
						link:'/policyRule',
						index:3
					},
					{
						tit:'交易规则',
						link:'/dealRule',
						index:4
					},
					{
						tit:'关于我们',
						link:'/aboutUs',
						index:5
					}

				]
			}
		},
		methods: {
			detail(name){
				this.$router.push(name)
				
				document.querySelector('body').removeAttribute('style')
				document.querySelector('html').removeAttribute('style')				
			},			
			p_Method(){
				this.show_tab = !this.show_tab
				if(this.show_tab){
					 document.querySelector('body').setAttribute('style', 'overflow: hidden;height:100%')
					 document.querySelector('html').setAttribute('style', 'overflow: hidden;height:100%')
				}else{
					 document.querySelector('body').removeAttribute('style')
					 document.querySelector('html').removeAttribute('style')
				}
				
			},			
			toLink(val){
				this.active = val.index;
				this.$router.push(val.link)
			},
			searchMethod() {
				if(this.searchData != ""){
					this.$router.push({
						path: '/search',
						query: {
							subjectName: this.searchData,
							activIndex:this.activIndex,
						}
					})
				}else{
					this.$message({
						message: '请填写搜索内容',
						type: 'warning'
					});           
				}
			},
			goFirstPage() {
       			window.open('http://www.hzaee.com.cn/', '_blank');
			}	
		},
		watch: {
			searchVal(newV) {
				this.searchData = newV
			}
		}
	}
</script>

<style scoped>
	.header_main{
		width: 1200px;
		margin: auto;
	}
	.logo{
		width: 60px;
		height: 60px;
		margin-right:10px;
	}
	.fhsy {
		width: 80px;
		font-size: 14px;
		letter-spacing:2px;
		cursor:pointer;
		/* margin-left: 50px; */
	}
	.logo_name{
		font-size: 22px;
		font-weight: 600;
		letter-spacing:4px;
	}
	.tit_name>div{
		padding: 30px 0px;
		margin: 0 10px;
		font-size: 14px;
		letter-spacing:2px;
		cursor:pointer;
		width: 75px;
		text-align: center
	}
	.tit_active{
		background: #2c9f45;
		color: #fff;
	}
	.el-input /deep/ .el-input__inner:focus-within {
		border: 1px solid #2c9f45;
	}
</style>